<!doctype html>
<html lang="en">
<head>
    <!-- api-AIzaSyArtso4ac1Vlgj_BE_4H4dSH39umfH41V8 -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArtso4ac1Vlgj_BE_4H4dSH39umfH41V8"
    ></script>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap CSS Files -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="stylesheet" href="bootstrap/css/font-awesome-5.8.1.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/mdb.css">
    <link rel="stylesheet" href="bootstrap/css/style.css">
    <title>Travel </title>
    <style>
    #map{
        width: 100%;
        height: 400px;
    }
    </style>
</head>
<body>

    <!-- Main Navbar -->
    <nav class="navbar navbar-expand-sm navbar-dark bg-teal">
        <div class="container">
            <a href="index.html" class="navbar-brand">
               <i class="fa fa-plane-departure"></i> Travel Mysore</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#travel-navbar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="travel-navbar">
                <ul class="navbar-nav ml-auto">
                    
                    <li class="nav-item px-3">
                        <a href="#search" class="nav-link">Search</a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="#places" class="nav-link">Visiting Spots</a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="#gallery" class="nav-link">Gallery</a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="#contact" class="nav-link">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Slider Section -->
    
    <!-- Search Section -->
    <section id="search" class="p-3 bg-teal text-white">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h5 class="display-4">Search Your Destination</h5>
                    <p class="lead"> The old city of Mysore was built around the main palace of the Wodeyar dynasty. Many mansions and smaller palaces were built for close relatives of the rulers in urban districts such as Nazarbad, and Lakshipuram. By contrast the agraharas (residential areas) consisted of mall houses, in these lived the palace cooks and clerks, who were mainly Brahmins.</p>
                    <div class="row">
                        <div class="col-md-6">
                            <form>
                                <div class="form-group">
                                    <input type="search" class="form-control" placeholder="Mysore Palace">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-light p-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="card text-center mt-3">
                        <div class="card-body">
                            <i class="fa fa-train fa-4x text-teal"></i>
                            <p class="h2">Nearest Railway stations</p>
                            <p>You can easily travel to Mysore by train. Nearest stations are Mysuru Junction, Shrirangapattan, Pandavapura.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-center mt-3">
                        <div class="card-body">
                            <i class="fa fa-plane-departure fa-4x text-teal"></i>
                            <p class="h2">Nearest airports</p>
                            <p>Kempegowda International Airport is nearest airport in Bangalore. If you are travelling through charter flight Mysore Airport will be the good choice to travel.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-center mt-3">
                        <div class="card-body">
                            <i class="fa fa-building fa-4x text-teal"></i>
                            <p class="h2">Hotels</p>
                            <p>You can easily find good hotels to stay in Mysuru. Some of the shortlisted ones are .....</p>
                            <a href="hotels.html" target="_blank"><button class="btn btn-teal btn-sm">Read More</button></a>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Popular Places -->
    <section id="places" class="p-3">
        <div class="container">
            <div class="row text-center">
                <div class="col">
                    <h5 class="display-4">
                        <span class="text-teal">Popular</span> Places
                    </h5>
                    <p class="lead">Travel makes one modest. You see what a tiny place you occupy in the world.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/122912659_751949718729990_6509950869463053376_n.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Mysore Palace</h3>
                            <p class="card-text">The former residence of the royal family of Mysore, the Mysore Palace is an extremely breath-taking example of the Indo-Sarcenic style of architecture. It was built in the year 1912 for the 24th Ruler of the Wodeyar Dynasty, and is till date one of the biggest palaces in the country. It's one of the most popular and well known tourist attractions in India.</p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/brindavan-gardens-1-768x509.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Brindavan Gardens</h3>
                            <p class="card-text">Built across the Kaveri river, these beautiful gardens were constructed by Krishnaraja Wodeyar. These gardens spread over 60 acres of land and were modeled after the Shalimar gardens of Kashmir. The beauty of these gardens multiplies in the evenings when the fountains light up in various colors.</p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/Temple_at_Somnathpur_20180317143032.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Somanathapura Temple</h3>
                            <p class="card-text">The village is named after Somnath, the commander of the Hoysala army who founded this place. It has a perfect natural setting for a family picnic. Also, the Somnathpur temple is a classic example of the stone carvings in Hoysala architecture.</p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/Giraffe_mysuru_zoo_april.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Mysore Zoo</h3>
                            <p class="card-text">One of the best zoological gardens in India, it was established in the year 1892 by Maharaja Chamaraja Wodeyar for the royals and handed over to the Department of Parks and Gardens of the State Govt on attaining freedom. Along with being home to various species of birds, mammals and reptiles, this zoo also engages in captive breeding of exotic and endangered species.</p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/1200px-Chamundeshwari_Temple_Mysore.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Chamundeshwari Temple</h3>
                            <p class="card-text">Built atop the Chamundi Hills, this temple dates back to the 12th century. The idol of the main deity is made of gold. Also featured in this temple is a intricately engraved seven storey Gopuram and a silver plated entrance.</p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/B_20180307004329.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Bonsai Garden</h3>
                            <p class="card-text">The Bonsai Garden of Mysore is home to over a 100 different varieties of Bonsai trees spread across a vast estate of about 4 acres. It is a part of the Avadoota Datta Peetham of the Sri Ganapathi Sachidananda Ashrama.</p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/Karanji-Lake-Mysore.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Karanji Lake</h3>
                            <p class="card-text">Karanji Lake placed in Mysore Karnataka, is surrounded by a nature park comprising of a butterfly park and an aviary which is the biggest 'walk-through aviary' in India. Also a museum named, the Regional Museum of Natural History is placed on the banks of this lake. The area over which the Karanji lake spans is of 90 hectares. On one hand, the foreshore area covers about 35 hectares waterspread area is about 55 hectares, the foreshore area measures about 35 hectares. </p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/jaganmohan-palace.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Jaganmohan Palace</h3>
                            <p class="card-text">The palace that housed the royals before the construction of The Mysore palace, this structure displays various paintings of the past kings of Mysore and is one of the oldest buildings in the city. </p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mt-3">
                        <img src="images/talakadu.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Talakadu</h3>
                            <p class="card-text">Nestled on the banks of River Cauvery, Talakadu is town known for its sand dunes. With a rich past and heritage, the town is also quite famous among the devotees who come here for a special worship.</p>
                            <button class="btn btn-teal btn-sm">Read More</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col text-center">
                    <button class="btn btn-dark btn-lg">
                        <i class="fa fa-play mr-2"></i> Start Booking
                    </button>
                </div>
            </div>
        </div>
    </section>
<!-- longitude and latitudes 12.41649, 76.63351-->
    <!-- Social Icons -->
    <section class="p-3  text-black text-center">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>Map to follow</h1>
                    
                    
                        <div id="map"></div>
                    
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section id="gallery" class="p-3">
        <div class="container">
            <div class="row text-center">
                <div class="col">
                    <h5 class="display-4">
                        <span class="text-teal">Photo</span> Gallery
                    </h5>
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <img src="images/1200px-Mysore_Palace_Morning.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-md-3">
                    <img src="images/banner2.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-md-3">
                    <img src="images/St_Philomena_s_spereChurch_Mysore Karnataka.jpg" class="img-fluid" alt="">
                </div>
                
            </div>
            <div class="row mt-4">
                <div class="col-md-3">
                    <img src="images/card.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-md-3">
                    <img src="images/mysore-university.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-md-3">
                    <img src="images/sand-museum-mysore-5.jpg" class="img-fluid" alt="">
                </div>
                
            </div>
            
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="p-3">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="card mt-3">
                        <div class="card-body bg-teal text-center text-white">
                            <i class="fa fa-envelope fa-4x"></i>
                            <h2>Contact For Bookings</h2>
                            <p>So what are you waiting for book your tickets right now for your next vacation to Mysuru? For more querries contact us !!</p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-md-6">
                    <div class="card mt-3">
                        <div class="card-header bg-teal text-white text-center">
                            <h3>Contact Us</h3>
                        </div>
                        <div class="card-body bg-light">
                            <form>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Name">
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <input type="number" class="form-control" placeholder="Mobile Number">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Loved Destination">
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control" rows="5" placeholder="Your Description"></textarea>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Footer -->
    <footer class="p-3 mt-3 bg-teal text-white text-center">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h3>Copyright &copy; 2020 , Travel Mysore</h3>
                    <h6>All Rights Reserved</h6>
                    <h6>Developed & Maintained by Pratik and Mukul</h6>
                </div>
            </div>
        </div>
    </footer>

<!-- Bootstrap Js files -->
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/mdb.js"></script>
<script>
    $('.carousel').carousel({
        interval : 3000,
        pause : 'hover'
    });
</script>
<script>
    var myCenter = new google.maps.LatLng(12.29791, 76.63925);
    function initialize(){
        var mapProp = {
            center:myCenter,
            zoom:12,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
    
        var map = new google.maps.Map(document.getElementById("map"),mapProp);
    
        var marker = new google.maps.Marker({
            position:myCenter,
        });
    
        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
<script>(function(w, d) { w.CollectId = "5fd44966278c444f79e6977c"; var h = d.head || d.getElementsByTagName("head")[0]; var s = d.createElement("script"); s.setAttribute("type", "text/javascript"); s.async=true; s.setAttribute("src", "https://collectcdn.com/launcher.js"); h.appendChild(s); })(window, document);</script>
</body>
</html>
